<!-- 自定义底部导航栏组件: pTabbar -->
<template>
	<u-tabbar :value="value" :placeholder="false" :safeAreaInsetBottom="false">
		<view class="tabbar">
			<view class="item" :class="value === 0? 'item-active' : ''" @click="clickItem(0)">
				<image v-show="value === 0" class="icon" src="/static/images/tabbar/dc_a.png" mode=""></image>
				<image v-show="value !== 0" class="icon" src="/static/images/tabbar/dc.png" mode=""></image>
				<u-badge class="badge" numberType="overflow" max="99" :value="10"></u-badge>
				<text class="name">调查</text>
			</view>
			<view class="item" :class="value === 1? 'item-active' : ''" @click="clickItem(1)">
				<image v-show="value === 1" class="icon" src="/static/images/tabbar/cy_a.png" mode=""></image>
				<image v-show="value !== 1" class="icon" src="/static/images/tabbar/cy.png" mode=""></image>
				<u-badge class="badge" numberType="overflow" max="99" :value="8"></u-badge>
				<text class="name">采样</text>
			</view>
			<view class="item" :class="value === 2? 'item-active' : ''" @click="clickItem(2)">
				<image v-show="value === 2" class="icon" src="/static/images/tabbar/jcj_a.png" mode=""></image>
				<image v-show="value !== 2" class="icon" src="/static/images/tabbar/jcj.png" mode=""></image>
				<u-badge class="badge" numberType="overflow" max="99" :value="0"></u-badge>
				<text class="name">检测井</text>
			</view>
			<view class="item" :class="value === 3? 'item-active' : ''" @click="clickItem(3)">
				<image v-show="value === 3" class="icon" src="/static/images/tabbar/gd_a.png" mode=""></image>
				<image v-show="value !== 3" class="icon" src="/static/images/tabbar/gd.png" mode=""></image>
				<u-badge class="badge" numberType="overflow" max="99" :value="0"></u-badge>
				<text class="name">更多</text>
			</view>
		</view>
	</u-tabbar>
</template>

<script>
	import pageMixins from '@/mixins/pageMixins.js';
	export default {
		mixins: [pageMixins],
		props: {},
		data() {
			return {
				value: 0
			}
		},
		methods: {
			clickItem(e) {
				this.value = e;
				this.$emit('valueChange', e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #555555;
		padding: 5px;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			flex: 1;
			padding: 2px;
			border-radius: 15rpx;
			position: relative;

			.icon {
				height: 20px;
				width: 20px;
				margin-bottom: 5rpx;
			}


			.name {
				color: #f1f1f1;
				font-size: 12px;
			}

			.badge {
				position: absolute;
				top: -3px;
				margin-right: -30px;
			}
		}

		.item-active {
			background-color: #F2F3FF;

			.name {
				color: $uni-color-primary;
			}
		}
	}
</style>